<template>
    <div class="custom-tabs-container">
        <el-tabs v-model="activeTab">
            <el-tab-pane label="修改密码" name="tab1">
                <el-form :model="form" ref="formRef" :rules="rules"  label-width="80px" :inline="false" size="normal">
                    <!-- 添加 prop="oldPass" -->
                    <el-form-item label="旧密码" prop="oldPass">
                        <el-input type="password" v-model="form.oldPass"></el-input>
                    </el-form-item>
                    <!-- 添加 prop="newPass" -->
                    <el-form-item label="新密码" prop="newPass">
                        <el-input type="password" v-model="form.newPass"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="submitForm('formRef')">提交</el-button>
                        <el-button @click="resetForm('formRef')">取消</el-button> 
                    </el-form-item>
                </el-form>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<script>
export default {
    data() {
        return {
            activeTab: 'tab1', // 默认选中的标签
            form: {
                oldPass: '', // 初始化表单模型
                newPass: '',
                userId: this.$store.getters.currentUser.id
            },
            rules: {
                oldPass: [
                    { required: true, message: '请输入旧密码', trigger: 'blur' },
                ],
                newPass: [
                    { required: true, message: '请输入新密码', trigger: 'blur' },
                ],
            }
        };
    },
    methods: {
        // 提交表单
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.$ajax.post("/user/updatePass",this.form).then(
                        res => {
                            if (res.code===200) {
                                this.$message.success('OK');
                            }else{
                                this.$message.error(res.msg);
                            }
                        }
                    )
                } else {
                    this.$message.error('表单验证失败');
                    return false;
                }
            });
        },
        // 重置表单
        resetForm(formName) {
            this.$refs[formName].resetFields();
        }
    }
}
</script>

<style>
.custom-tabs-container {
    width: 60%;
    margin: 0 auto;
    padding: 20px;
}
</style>
